<template>
	<view class="renli" :style="{ backgroundImage: `url(${backgroundImageUrl})` }">
		<NavBar>
			<template #center>
				<view class="tabWrap">
					<view class="tabItem" :style="{ backgroundColor: current === i ? '#fff' : 'transparent' }" v-for="(v, i) in tabList" key="i" @tap="tabheadClick(i, v)">
						<text>{{ v.name }}</text>
					</view>
				</view>
			</template>
		</NavBar>

		<view v-if="current === 0">
			<Purse :isNav="false" />

			<!-- <view class="yueWrap" >
				<view class="tye">
					<text class="yueTit">我的余额</text>
					<text class="money">30000</text>
				</view>
				<view class="txBtnWrap">
					<view class="txBtn">
						<text>体现</text>
					</view>
					<view class="txBtn">
						<text>充值</text>
					</view>
				</view>
				
				<view class="fie">
					<view class="zuan">
						<text>钻石</text>
						<text>10</text>
					</view>
					<view class="line"></view>
					<view class="zuan">
						<text>钻石</text>
						<text>10</text>
					</view>
					<view class="line"></view>
					<view class="zuan">
						<text>钻石</text>
						<text>10</text>
					</view>
				</view>
				
			</view>
			
			<view class="yueWrap" style="margin-top: 24rpx;">
				<view class="fie" style="border-top: none;">
					<view class="zuan">
						<text>¥100</text>
						<text>收益打赏</text>
					</view>
					<view class="line"></view>
					<view class="zuan">
						<text>¥100</text>
						<text>收益打赏</text>
					</view>
				</view>
			</view>
			
			<view class="yueWrap" style="margin-top: 24rpx;">
				<view class="mingxiWrap">
					<text>明细</text>
					<image class="rightIcon" src="../../TUIKit/assets/icon/right-icon.svg" mode=""></image>
				</view>
			</view> -->
		</view>
		<view v-if="current === 1">
			<view class="tabNav">
				<view class="navItem" :style="{}" v-for="(v, i) in tabNavList" key="i" @tap="tabClick(i, v)">
					<view class="fowt">
						<text :style="{ color: cur === i ? '#000' : '#595959'}">{{ v.name }}</text>
						<view
							:style="{
								width: '64rpx',
								height: '8rpx',
								background: cur === i ? 'linear-gradient( 90deg, #A065FF 0%, #FEC7FF 100%)' : 'transparent',
								borderRadius: '4rpx 4rpx 4rpx 4rpx'
							}"
						>
						
						</view>
					</view>
				</view>
			</view>

			<view class="searchWrap">
				<view class="dateWrap">
					<image class="calendar" src="../../../static/img/homeServer/icon_calendar.png" mode=""></image>
					<picker mode="date" :value="time" fields="year" :start="1994" :end="2099" @change="bindDateChange">
						<text style="color: #fff">{{ time }}年</text>
					</picker>
					<image class="calendar" src="../../../static/img/icon_down_white.png" mode=""></image>
				</view>
				<view class="dateWrap">
					<image class="calendar" src="../../../static/img/homeServer/icon_calendar.png" mode=""></image>
					<picker mode="selector" :value="time" :range="mothList" @change="bindMonthChange">
						<text class="monthShow">{{ month || '选择' }}月</text>
					</picker>
					<image class="calendar" src="../../../static/img/icon_down_white.png" mode=""></image>
				</view>
			</view>
			<listItemVue :data="listData" />
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import NavBar from '@/components/navBar.vue';
import listItemVue from './components/listItem.vue';
import Purse from '../../purse/purse.vue';
import { statIncome } from '@/utils/api/homeServer';

const cur = ref(0);
const current = ref(0);
const time = ref(new Date().getFullYear());
const month = ref('');
const tabNavList = ref([
	{ id: 1, name: '收入', value: 'INCREASE_BALANCE' },
	{ id: 2, name: '支出', value: 'DECREASE_BALANCE' }
]);

const tabList = ref([
	{ id: 0, name: '钱包', value: 'BOSS' },
	{ id: 1, name: '财务', value: 'EMP' }
]);

const mothList = ref(['1月', '2月', '3月']);

const listData = ref({});
const transType = ref('INCREASE_BALANCE'); //支出传：DECREASE_BALANCE   收入传：INCREASE_BALANCE

const backgroundImageUrl = ref('../../../static/img/homeServer/caiwu2_bg.png');

// current===0 ? '../../../static/img/homeServer/caiwu2_bg.png' : '../../../static/img/wode.png'

onLoad(() => {
	getData();
});

watch(transType, (New, Old) => {
	getData();
});

const getData = async () => {
	uni.showLoading({
		title: 'loading...'
	});
	const { data, success } = await statIncome({
		data: {
			queryFinanceTypeEnum: month.value ? 'month' : 'year',
			dateTime: month.value ? time.value + '-' + month.value : time.value,
			startTime: '',
			endTime: '',
			transType: transType.value
		}
	});
	if (success) {
		listData.value = data;
	}

	uni.hideLoading();
};

const tabheadClick = (index: any, item, any) => {
	current.value = index;
	backgroundImageUrl.value = index === 0 ? '../../../static/img/homeServer/caiwu2_bg.png' : '../../../static/img/wode.png';
};

const tabClick = (index: any, item, any) => {
	// "shopAmount": "/**\n     * 店铺收益\n     */",
	// "scoreAmount": "/**\n     * 积分分红收益\n     */",
	// "rewardAmount": "/**\n     * 墙墙收益\n     */",
	// "workAmount": "/**\n     * 兼职收益\n     */"

	transType.value = item.value;
	cur.value = index;
};

const bindDateChange = (e: any) => {
	time.value = e.detail.value;
	getData();
};

const bindMonthChange = (e: any) => {
	console.log(e);
	month.value = parseInt(mothList.value[e.detail.value]);
	getData();
};
</script>

<style lang="scss" scoped>
:deep(.navBarTop) {
	background-color: transparent;
	color: #fff;
}

page {
	background-color: #f4f6fa;
	height: 100%;
}

.renli {
	// background-image: url('@/static/img/homeServer/caiwu2_bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.tabWrap {
	display: flex;
	background: #c8acff;
	border-radius: 37rpx;
	padding: 8rpx 12rpx;

	.tabItem {
		border-radius: 36rpx;
		padding: 8rpx 0;
		width: 120rpx;
		text-align: center;

		text {
			font-size: 22rpx;
		}
	}
}

.tabNav {
	display: flex;
	padding: 36rpx 0 24rpx 0;

	.navItem {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;

		text {
			border-bottom: 4rpx solid transparent;
			padding-bottom: 12rpx;
		}
	}
}

.dateWrap {
	background: linear-gradient(262deg, #b080ff 0%, #8f72ff 100%);
	margin: 24rpx 0 24rpx 24rpx;
	padding: 0 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-radius: 32rpx;
	height: 64rpx;
}

.calendar {
	width: 48rpx;
	height: 48rpx;
}

.searchWrap {
	display: flex;
}

.monthShow {
	color: #fff;
}

.yueWrap {
	margin: 48rpx 24rpx 0;
	background-color: #fff;
	border-radius: 24rpx;
}

.tye {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 38rpx 0 0;
}

.txBtnWrap {
	display: flex;
	justify-content: center;
	margin: 68rpx 0 48rpx;
}

.txBtn {
	width: 265rpx;
	height: 88rpx;
	background: #e4e2fc;
	border-radius: 264rpx 264rpx 264rpx 264rpx;
	margin: 0 18rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fie {
	display: flex;
	border-top: 1rpx solid #eee;

	> .zuan {
		flex: 1;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	> .line {
		width: 1rpx;
		height: 47rpx;
		background-color: #eee;
		margin-top: 48rpx;
	}
}

.mingxiWrap {
	display: flex;
	justify-content: space-between;
	padding: 24rpx;
}

.rightIcon {
	width: 32rpx;
	height: 32rpx;
}

.money {
	height: 109rpx;
	font-family: D-DIN-DIN, D-DIN-DIN;
	font-weight: bold;
	font-size: 100rpx;
	color: #111111;
	line-height: 117rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.yueTit {
	height: 45rpx;
	font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
	font-weight: normal;
	font-size: 32rpx;
	color: #444444;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.fowt{
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
